<script>
import MyBase from '@/common/formComponent/MyBase';
import UniCheckBoxGroup from 'uview-ui/components/u-checkbox-group/u-checkbox-group';
import UniCheckBox from 'uview-ui/components/u-checkbox/u-checkbox';

export default {
  name: 'MyCheckBox',

  components: {
    MyBase
  },

  props: {
    value: {
      type: [String, Number],
      default: ''
    },

    title: {
      type: String,
      default: ''
    },

    dataList: {
      type: Array,
      default: () => []
    },

    optionView: { // label value
      type: Object,
      required: true
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }
  },

  computed: {
    checkedValue: {
      get() {
        const arr = [];
        if (this.value) {
          this.value.split(',').map(o => {
            arr.push(o);
          });
        }
        return arr;
      },

      set(v) {
        let value = '';
        if (v.length) {
          value = v.join(',');
        }

        if (!this.disabled) {
          this.$emit('update:value', value);
        }
      }
    }
  },

  render(h) {
    const optionView = this.optionView;
    const checkItem = this.dataList.map(item => {
      const value = item[optionView.value];
      return h(UniCheckBox, {
        props: {
          name: value,
          value: this.checkedValue.includes(value)
        },
        on: {
          change: e => {
            if (e.value) {
              this.checkedValue = [...this.checkedValue, e.name];
            } else {
              this.checkedValue = this.checkedValue.filter(o => o !== e.name);
            }
          }
        }
      }, item[optionView.label]);
    });

    const baseSlots = {
      header: () => {
        return (
          <view>
            { this.title }
          </view>
        );
      },

      content: () => {
        return h(UniCheckBoxGroup, {
          props: {
            wrap: true
          }
        }, checkItem);
      }
    };

    return (
      <My-Base icon={this.icon} isShowIconArrow={ this.isShowIconArrow } scopedSlots={ baseSlots }/>
    );
  }
};
</script>

<style lang="scss" scoped>
</style>
